<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Cart</title>
  <link rel="stylesheet" href="./css/element.css">
  <style>
    .box {
      width: 800px;
      margin: 100px auto;
    }
    table{
      border: 1px solid #ccc;
      border-collapse: collapse;
      width: 800px;
      margin: 100px auto;
    }
    td{
      border: 1px solid #ccc;
    }
    .number {
      width: 40px;
    }
    .el-row{
      border-bottom: 1px dashed #898989;
    }
    .el-col{      
      padding:6px 0;
      text-align: center;
      height: 100%;
    }
    .bold{
      font-weight: 700;
    }
    .calc{
      padding: 10px;
      text-align: right;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box">
      <div class="el-row bold">
        <div class="el-col el-col-2">
          <label class="el-checkbox" @click="checkAll">
            <span class="el-checkbox__input" :class="{'is-checked':isCheckedAll}">
              <span class="el-checkbox__inner"></span>
              <input type="checkbox" aria-hidden="false" class="el-checkbox__original" v-model="isCheckedAll">
            </span>
          </label>
        </div>
        <div class="el-col el-col-10">商品</div>
        <div class="el-col el-col-3">单价</div>
        <div class="el-col el-col-4">数量</div>
        <div class="el-col el-col-3">小计</div>
        <div class="el-col el-col-2">操作</div>        
      </div>
      <div class="el-row" v-for="(item,index) in cartList" key="index">
        <div class="el-col el-col-2">
          <label class="el-checkbox" @click="singleCheck">
            <span class="el-checkbox__input" :class="{'is-checked':item.calc}">
              <span class="el-checkbox__inner"></span>
              <input type="checkbox" aria-hidden="false" class="el-checkbox__original" v-model="item.calc">
            </span>
          </label>
        </div>
        <div class="el-col el-col-10">{{item.name}}</div>
        <div class="el-col el-col-3">￥{{item.price}}</div>
        <div class="el-col el-col-4">
          <div class="el-input-number el-input-number--mini">
            <span role="button" class="el-input-number__decrease" @click="recude(item.id)">
              <i class="el-icon-minus"></i>
            </span>
            <span role="button" class="el-input-number__increase" @click="add(item.id)">
              <i class="el-icon-plus"></i>
            </span>
            <div class="el-input el-input--mini"><!---->
              <input type="text" autocomplete="off" max="Infinity" min="1" class="el-input__inner" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="-Infinity" aria-valuenow="10" v-model="item.number" aria-disabled="false">
            </div>
          </div>
        </div>
        <div class="el-col el-col-3">￥{{item.price * item.number}}</div>
        <div class="el-col el-col-2">
          <input type="button" value="删除" class="el-button el-button--danger el-button--mini" @click="del(item.id)">
        </div>        
      </div>
      <div class="calc" style="text-align: right;">
        总共要结算<span>{{totalCount}}</span>件商品,总计<span>￥{{totalPrice}}</span>
      </div>
    </div>
    
  </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/element.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      isCheckedAll:true,
      cartList:[
        {id:1,calc:true, name:'靴子',price:10,number:1},
        {id:2,calc:true, name:'裙子',price:100,number:1},
        {id:3,calc:true, name:'衣服',price:50,number:1},
      ]
    },
    computed:{
      totalCount(){
        let count = 0;
        this.cartList.filter(e=>e.calc).forEach(e=>count+=e.number)
        return count        
      },
      totalPrice(){
        let total = 0
        this.cartList.filter(e=>e.calc).forEach(e=>total+=e.number * e.price)
        return total;
      }
    },
    methods:{
      recude(id){
        let target = this.cartList.find(e=>e.id === id)
        target.number--;
      },
      add(id){
        let target = this.cartList.find(e=>e.id === id)
        target.number++;
      },
      del(id){
        if(!confirm('确定要删除吗？')) return;
        let index = this.cartList.findIndex(e=>e.id == id)
        this.cartList.splice(index,1);
      },
      checkAll(){
        this.isCheckedAll = !this.isCheckedAll;
        this.cartList.forEach(e=>e.calc = this.isCheckedAll);
      },
      singleCheck(){
        this.isCheckedAll = !this.cartList.find(e=>!e.calc)
      }
    }
  });
</script>
</html>